@import "./../theme";
@import "./../var";
@import "./widget-vars";

.widget-view {
  position: relative;
  min-height: $widget-min-height;
  cursor: pointer;
  font-size: inherit;
  border-radius: $radiusSmall;
  background: $widget-item-bg;
  overflow: hidden;
  padding: 8px 0 0;

  & > .el-form-item {
    margin-bottom: 14px!important;
  }
  & > .el-form-item--small {
    margin-bottom: 10px!important;
  }
  & > .el-form-item--mini {
    margin-bottom: 10px!important;
  }
  &.is-required {
    .el-form-item__label::before {
      content: '*';
      color: $colorDanger;
      font-weight: bold;
      margin-right: 4px;
    }
  }

  &.is-hidden {
    opacity: 0.5;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border: 2px solid $colorTextPrimary;
      background-image: linear-gradient(-45deg, $colorTextPrimary 0, $colorTextPrimary 10%, transparent 10%, transparent 50%, $colorTextPrimary 50%, $colorTextPrimary 60%, transparent 60%);
      background-size: 10px 10px;
      background-position: center;
      opacity: 0.1;

    }

    //&:after {
    //  content: "\ECB7";
    //  font-family: remixicon !important;
    //  font-style: normal;
    //  position: absolute;
    //  text-align: center;
    //  line-height: 1.4;
    //  color: $colorTextPrimary;
    //  top: 0;
    //  left: 0;
    //  width: 1.4rem;
    //  height: 1.4rem;
    //  background: $borderColorDark;
    //  border-radius: $radiusSmall;
    //}
  }

  .widget-view-action {
    position: absolute;
    z-index: 10;
    padding: 0;
    right: $widget-control-position;
    bottom: $widget-control-position;
    height: $widget-control-height;
    line-height: $widget-control-height;
    background: $widget-control-bg;
    border-radius: $radiusSmall;
    overflow: hidden;
    transition: background 0.2s;

    &:hover {
      background: $widget-control-hover-color;
    }

    i {
      font-size: $fontSizeRegular;
      color: $widget-control-color;
      padding: 0 0.3rem;
      height: 100%;
      display: inline-block;
      cursor: pointer;

      &:hover {
        background: $colorTextRegular;
      }
    }
  }

  .widget-view-drag {
    position: absolute;
    z-index: 10;
    padding: 0 0.25rem;
    left: $widget-control-position;
    bottom: $widget-control-position;
    height: $widget-control-height;
    line-height: $widget-control-height;
    background: $widget-control-bg;
    border-radius: $radiusSmall;
    overflow: hidden;

    &:hover {
      background: $widget-control-hover-color;
    }

    i {
      font-size: $fontSizeRegular;
      color: $widget-control-color;
      cursor: move;
    }
  }
  // 用于遮挡组件不可操作
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    z-index: 8;
    content: '';
  }

  &:hover {
    background: $widget-item-bg-hover;
    outline: 1px dashed $widget-container-border-active-color;

    .widget-view-drag {
      display: block;
    }
  }

  &.active {
    background: $widget-item-bg-active;
  }

  .error-tip {
    display: none;
  }

  &.has-error {
    outline: $colorDangerActive 1px dashed;

    .error-tip {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      color: $colorTextInverse;
      background: $colorDangerActive;
      font-size: $fontSizeSmall;
      padding: 0.2rem 0.7rem;
      border-radius: $radiusSmall;
    }
  }
}

